<template>
    <div>
        <Navbar></Navbar>

        <component :is="which" />  
        <!-- component标签默认效果和v-if一致,符合条件渲染,不符合条件不渲染,不会被缓存,当该组件切走再切回来时,用户输入的所以数据都将丢失 -->

        <!-- 使component数据缓存  当切回到该组件时,依旧保留上一次用户输入的数据(页面刷新后丢失) -->
        
        <keep-alive include="home,list">
            <component :is="which" />
        </keep-alive>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Tabbar from './Tabbar.vue'
import Home from './views/Home.vue'
import List from './views/List.vue'
import Center from './views/Center.vue'
import store from './store'
export default {
    data(){
        return {
            which:'Home'
        }
    },
    components:{
        Navbar,
        Tabbar,
        Home,
        List,
        Center
    },
    mounted() {
        let obj = {   //映射表
            '首页':'Home',
            '列表':'List',
            '我的':'Center',
        }
        store.subscribe((value)=>{
            this.which=obj[value]
        })
    },
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
</style>